<template>
	<view class="card" :style="{ backgroundImage: `url(${backgroundImage})` }"  @click="navigateTo(url)">
		<view class="content">
			<view class="title">每日科普</view>
			<view class="date">{{ today }}<span>日</span></view>
			<view class="text">
				{{ text }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSciNew
	} from '@/api/system/sci';

	export default {
		name: "PopScience",
		data() {
			return {
				backgroundImage: '/static/images/pop.png', // 默认背景图片
				today: new Date().getDate(), // 当天日期
				text: '1每天喝足够的水，促进健康和良好的身体功能', // 默认文本
				url: '/pages/sci/sci?id=', // 默认URL
				id: null // 初始化id为null
			};
		},
		mounted() {
			this.loadData();
		},
		methods: {
			updateCardContent(newDate, newText, newBackgroundImage) {
				this.today = newDate;
				this.text = newText;
				this.backgroundImage = newBackgroundImage;
			},

			navigateTo(url) {
				console.log("跳转到" + url + this.id);
				uni.navigateTo({
					url: url + this.id
				});
			},
			loadData() {
				// Assuming getSciNew() returns an object with title, image, description, and displayTime properties
				getSciNew().then(response => {
					console.log(response.data);
					this.text = response.data.title;
					this.backgroundImage = response.data.cover || this.backgroundImage;
					this.id = response.data.id; // Assuming id is retrieved from API response
				}).catch(error => {
					console.error('Error loading data:', error);
				});
			}
		}
	}
</script>

<style scoped>
	.card {
		position: relative;
		width: 100%;
		/* 设置卡片宽度为100% */
		max-width: 600px;
		/* 可选：设置最大宽度 */
		height: 100%;
		/* 高度自适应内容 */
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
		background-size: cover;
	}

	.card::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
	}

	.content {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 20rpx;
		color: #fff;
		/* 修改文本颜色为白色，增加对比度 */
	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 40px;
		display: block;
		width: 140px;
		padding: 5px 20px 5px 20px;
		background: #c59663;
		background-color: rgba(255, 133, 0, 0.5);
		margin-left: -20px;
		text-indent: 10px;
	}

	.date {
		font-size: 36px;
		margin-top: 40px;
		text-indent: 10px;
	}

	.date span {
		font-size: 12px;
		margin-left: 10rpx;
	}

	.text {
		font-size: 16px;
		margin-top: 50px;
		padding: 10px;
	}
</style>